<template>
	<view class="sys_treat">
		<view class="itsms">
			<!-- <image src="@/static/icons/aa16.png" mode=""></image> -->
			<view class="title">
				<view class="">病例ID {{form.caseCode6}}</view>
				<!-- <view v-if="form.caseRemark != 1" class="" @click="editTreat()">编辑</view> -->
			</view>
			<view class="file">
				<image @click="previewImg(baseURLImgUPD+form.caseImagebefore)" class="f1" v-if="form.caseImagebefore" :src="baseURLImgUPD+form.caseImagebefore" mode=""></image>
				<view class="f1" v-else>

					<image src="@/static/icons/aa17.png" mode=""></image>
				</view>
				<view class="po1">治疗前照片</view>
				<image class="a18" src="@/static/icons/aa18.png" mode=""></image>
				<image @click="previewImg(baseURLImgUPD+form.caseImageafter)" class="f1" v-if="form.caseImageafter" :src="baseURLImgUPD+form.caseImageafter" mode=""></image>
				<view class="f1" v-else>

					<image src="@/static/icons/aa17.png" mode=""></image>
				</view>
				<view class="po2">最新治疗后</view>
			</view>
			<view class="txt" style="margin-top: 80rpx;">疤痕说明:{{form.caseText}}</view>
			<view class="txt">提交时间:{{form.caseCreatetime}}</view>
			<view class="txt">更新时间:{{form.caseUpdatetime}}</view>
			
			<view class="remarkTit" v-if="!form.caseImagebefore">{{contentName}}</view>
			
			<view class="BgM4">
				<view @click="goDet(i)" class="listM4" v-for="(i,d) in form.treatList" :key="d">
					<view class="M4List">
						<view class="">治疗记录ID {{i.treatCode8}}</view>
						<view class="">{{i.treatCreatetime}}</view>
					</view>
					<image class="m1" src="@/static/icons/aa14.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<button v-if="form.caseRemark == 1" open-type="share" class="fx"><image src="@/static/icons/aaaa1.png" mode=""></image>分享</button>
	</view>
</template>

<script>
	import {
		getMycaseOne,contentList
	} from '@/api/pagesApi/index.js'
	// 图片服务器
	import baseURLShowImgUP from "@/api/base.js";
	export default {
		data() {
			return {
				list: [],
				form: {},
				baseURLImgUPD: '',
				
				contentName:'',//备注，从管理端拿的
			}
		},
		onShow(opt) {
			this.baseURLImgUPD = baseURLShowImgUP.baseURLShowImgUP;
			
			contentList().then(res=>{
				res.data.rows.forEach(i=>{
					if(i.contentType == 8){
						this.contentName = i.contentName
					}
				})
			})
			// getMycaseOne({
			// 	caseid: wx.getStorageSync('wzCaseid')
			// }).then(res => {
			// 	this.form = res.data.data
			// })
		},
		onLoad(opt) {
			console.log(111,opt)
			wx.hideShareMenu()
			if(opt.FXcaseid){
				getMycaseOne({
					caseid: opt.FXcaseid
				}).then(res => {
					this.form = res.data.data
				})
			}else{
				getMycaseOne({
					caseid: wx.getStorageSync('wzCaseid')
				}).then(res => {
					this.form = res.data.data
				})
			}
		},
		onShareAppMessage(res) {
			console.log(res)
			if (res.from === "button") {
				console.log("来自页面内分享按钮");
			}
			return {
				title: '治疗列表', // 分享标题
				path: `packageA/pages/index/case/treatment?FXcaseid=${this.form.caseId}`, // 分享路径
				imageUrl: this.baseURLImgUPD+this.form.caseImageafter, // 分享图片
				success: () => {
					console.log("分享成功");
				},
				fail: () => {
					console.log("分享失败");
				}
			};
		},
		methods: {
			goDet(i) {
				uni.navigateTo({
					url: `./detail?id=${this.form.caseId}&tid=${i.treatId}`
				})
			},

			editTreat() {
				uni.navigateTo({
					url: '../diagnosis?id='+this.form.caseId
				})
			},
			
			  previewImg(imageUrl) {
			            var images = [];
			            images.push(imageUrl);
			            console.log(images);
			            uni.previewImage({
			                current: 0,
			                urls: images,
			                longPressActions: {
			                    itemList: ["保存图片"],
			                    success: (data) => {
			                        uni.saveImageToPhotosAlbum({
			                            filePath: payUrl,
			                            success: function () {
			                                uni.showToast({
			                                    icon: "success",
			                                    title: "保存成功",
			                                });
			                            },
			                            fail: (err) => {
			                                uni.showToast({
			                                    icon: "none",
			                                    title: "保存失败，请重新尝试",
			                                });
			                            },
			                        });
			                    },
			                    fail: (err) => {
			                        console.log(err.errMsg);
			                    },
			                },
			            });
			        },
		}
	}
</script>

<style scoped lang="scss">
	.sys_treat {
		width: calc(100% - 40rpx);
		min-height: calc(100vh - 60rpx);
		padding: 20rpx 20rpx 40rpx;
		background-color: #f6f6f6;

		.itsms {
			width: 100%;
			padding: 0 20rpx;
			min-height: 1200rpx;
			/* 设置高度为视口高度 */
			box-sizing: border-box;
			border: 1px solid #CBE8E6;
			border-radius: 8rpx;
			background: linear-gradient(180deg, #E7F8F7 20%, #FFFFFF 50%, #FFFFFF 50%);

			// image{
			// 	width: 100%;
			// 	height: 100%;
			// }
			.title {
				width: calc(100% - 0rpx);
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;

				view:nth-child(2) {
					background-color: #fff;
					color: #48C2B9;
					font-size: 28rpx;
					padding: 10rpx 40rpx;
					border-radius: 28rpx;
					border: 1rpx solid #48C2B9;
				}
			}

			.file {
				width: 100%;
				display: flex;
				align-items: center;
				position: relative;

				.po1 {
					position: absolute;
					bottom: -50rpx;
				}

				.po2 {
					position: absolute;
					left: 280rpx;
					bottom: -50rpx;
				}

				.f1 {
					width: 160rpx;
					height: 160rpx;
					border: 1rpx solid #48C2B9;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8rpx;

					image {
						width: 48rpx;
						height: 48rpx;
					}
				}

				.a18 {
					margin: 0 20rpx;
					width: 80rpx;
					height: 6rpx;
				}
			}

			.txt {
				margin-top: 10rpx;
				font-size: 28rpx;
				color: #333;
			}
		}
	}


	.BgM4 {
		background-color: #fff;
		width: calc(100% - 0rpx);
		border-radius: 8px;
		margin: 20rpx auto;

		.listM4 {
			width: calc(100% - 80rpx);
			height: 72px;
			border-radius: 8px 8px 0px 0px;
			opacity: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx;
			border-bottom: 1rpx solid #F3F3F3;

			.M4List {
				width: 80%;

				view:last-child {
					color: #9F9F9F;
					font-size: 28rpx;
					margin-top: 10rpx;
				}
			}

			image {
				width: 15rpx;
				height: 20rpx;
			}
		}
	}
	.fx {
		position: absolute;
		right: 40rpx;
		bottom: 210rpx;
		color: #48C2B9;
		width: 110rpx;
		height: 110rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		border: 1rpx solid #48C2B9;
		font-size: 24rpx;
	
		image {
			width: 36rpx;
			height: 36rpx;
		}
	}
	.remarkTit{
		color: red;
		margin-top: 20rpx;
	}
</style>